<template>
  <div>
      <p class="title">
          <span @click="setCount(index)" :class="{active: count === index}" v-for="(item, index) in list" :key = "index">
              {{item.title}}
          </span>
      </p>
      
      <keep-alive :include="['bbb', 'aaa']">
          <component :is="list[count].compoent"></component>
      </keep-alive>
  </div>
</template>

<script>
import ChildA from './ChildA'
import ChildB from './ChildB'
export default {
    components: {
        ChildA,
        ChildB
    },
    data() {
        return {
            list: [
                {
                    title: '第一条',
                    compoent: ChildA
                },
                {
                    title: '第二条',
                    compoent: ChildB
                }
            ],
            count: 0
        }
    },
    methods: {
        setCount(index) {
            this.count = index
        }
    }
}
</script>

<style scoped>
    .title{
        display: flex;
        text-align: center;
    }
    .title > span {
        flex: 1;
    }
    .active{
        color: red;
    }
</style>